<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
    <style>
        .box1 {
            /* css像素 */
            width: 900px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>

<body>
    <!-- 像素 分辨率
        css像素 编写网页的时候使用的像素 例如字体px
        物理像素 1920 x 1080
        浏览器会将css像素转换成物理像素
        一个css像素最终由几个物理像素显示,由浏览器决定 默认一个css像素等于一个物理像素

        视口:viewport
            视口即浏览器的窗口大小,屏幕中显示网页的区域
        不同的屏幕,单位像素的大小不一样,单位像素约小,越清晰

        默认情况下,移动端的网页都会将视口设置为980像素(css像素),以确保pc网页在移动端可以正常访问,如果网页宽度超过了980 移动端浏览器会对网页进行缩放以完整显示网页
        iphone6:width 750 x 1334 这里的750指的是物理像素
    -->
    <div class="box1"></div>
</body>

</html>